<template>
  <div>
    <div class="container">
      <el-row>
        <el-col :span="12">
          <span style="font-size:18px; font-weight:bold;">物流管理</span>
        </el-col>
        <el-col style="text-align:right;" :span="12">
          <el-button
            type="primary"
            size="small"
            @click="
              editVisible = true;
              currentId = null;
            "
          >添加</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        style="width: 100%;margin-top:5px;"
        :height="tableHeight"
        border
        stripe
      >
        <el-table-column type="index" width="50" />
        <el-table-column label="物流名称" prop="name" />
        <el-table-column label="代码" prop="for_short" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="
                editVisible = true;
                currentId = scope.row.id;
              "
            >编辑</el-button>
            <el-button
              size="small"
              @click="deleteExpress(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <edit-express
      :id="currentId"
      :visible="editVisible"
      @close="
        editVisible = false;
        getExpressList();
      "
    />
  </div>
</template>

<script>
import editExpress from './component/add-express.vue'
import { getExpressList, deleteExpress } from '@/api/express-mng'
export default {
  name: 'ExpressMngIndex',
  components: {
    editExpress
  },
  data() {
    return {
      editVisible: false,
      list: [],
      tableHeight: 0,
      currentId: null
    }
  },
  created() {
    this.getExpressList()
    this.changeSize()
  },
  methods: {
    deleteExpress(id) {
      this.$confirm('确认删除该物流?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteExpress({ id }).then(res => {
          if (res.code === 200) {
            this.getExpressList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
      })
    },
    getExpressList() {
      getExpressList().then(res => {
        if (res.code === 200) {
          this.list = res.data
        }
      })
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 180
      window.onresize = () => {
        this.changeSize()
      }
    }
  }
}
</script>

<style></style>
